﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>青鸟租房</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/function.js"></script>
	<script src="js/vue.min.js"></script>
	<script src="js/axios.min.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<style>
		.house-thumb img{
			width: 100px;
			height: 75px;
		}
	</style>
<script type="text/javascript">
		function add(url){
			open("add.html","_self");
		}
		function update(id){
			open("add.html","_self");
		}
		function del(id, page) {
			var isDel = confirm("是否确定删除");
		
		}
	</script>
</head>
<body>
<div id="app">
	<div id="header" class="wrap">
		<div id="logo">
			<img src="images/logo.gif" />
		</div>
		<div v-if="username!=''" class="search">
			<a href="login.html">欢迎,{{username}}</a>
			<span @click="loginout">退出</span>
			<label class="ui-green"><input onclick="add()" type="button" name="search" value="发布房屋信息" /></label>
			<label class="ui-green"><input type="button" name="search" value="退       出" onclick='document.location="index.jsp"' /></label>
		</div>
		<div v-else class="search">
			<a href="login.html">登录</a>
			<a href="register.html">注册</a>
			<label class="ui-green"><input onclick="add()" type="button" name="search" value="发布房屋信息" /></label>
			<label class="ui-green"><input type="button" name="search" value="退       出" onclick='document.location="index.jsp"' /></label>
		</div>
	</div>
	<div class="main wrap">
		<div id="houseArea">
			<table class="house-list">
				<tr v-for="h in list">
					<td class="house-thumb"><span><a href="page/show.jsp?id=10001"><img :src="h.imgs" /></a></span></td>
					<td>
						<dl>
							<dt>
								<a href="#">{{h.title}}</a>
							</dt>
							<dd>
								{{h.intro}}<br /> 联系方式：{{h.contact}}
							</dd>
						</dl>
					</td>
					<td class="house-type"><label class="ui-green"><input type="button" @click='location.href="add.html?id="+h.id' value="修    改" /></label></td>
					<td class="house-price"><label class="ui-green"><input type="button" @click='del(h.id)' value="删    除" /></label></td>
				</tr>
			</table>
			<div class="pager">
				<ul>
					<li class="current"><a href="#">首页</a></li>
					<li class="current"><a href="#">上一页</a></li>
					<li class="current"><a href="#">下一页</a></li>
					<li class="current"><a href="#">尾页</a></li>
				</ul>
				<span class="total">1/1页</span>
			</div>
		</div>
	</div>
	<div id="footer" class="wrap">
		<dl>
			<dt>青鸟租房 &copy; 2015 源辰信息科技有限公司 湘ICP证1000001号</dt>
			<dd>关于我们 · 联系方式 · 意见反馈 · 帮助中心</dd>
		</dl>
	</div>
</div>


<script>
	var v =new Vue({
		el:'#app',
		data:{
			list:[],
			username:'',
		},
		methods:{
			query(){
				axios.get("yc112plyqnzf/house/query").then(res=>this.list=res.data);
			},
			del(id){
				this.$confirm("请确认要删除的是该房屋?").then(()=>{
					axios.get("/yc112plyqnzf/house/deleteById?id="+id).then(res=>{
						if(res.data.code){
							this.$message(res.data.msg);
							this.query();
						}else{
							this.$alert(res.data.msg);
						}
					})
				})
			},
			loginout(){
				this.$confirm("您确定要退出吗?").then(()=>{
					axios.get("/loginout").then(res=>{
						this.username   ='';
					})
				})
			},
			checklogin(){
				axios.get("checklogin").then(res=>{
					if(res.data.code){
						this.username=res.data.msg;
					}
				})
			}
		},
		created(){
			this.query();
			this.checklogin();
		}

	})
</script>

</body>
</html>
